<template>
  <!-- categories 分类管理 -->
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-button type="primary" @click="addCompileFn">添加分类</el-button>

        <el-input
          v-model="search"
          placeholder="请输入关键字"
          style="width: 600px"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search" @click="changeFn" />
        </el-input>
      </el-row>

      <!-- 上面的分割线 -->
      <el-divider />
      <!-- 表格 -->
      <el-table style="width: 100%" border :data="categoriesList">
        <el-table-column label="图片">
          <template v-slot="{ row }">
            <img :src="row.image" style="width: 200px; height: 200px">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" @click="compileFn(row)">编辑</el-button>
            <el-button type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 下面的分割线 -->
      <el-divider />

      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="categoriesLength"
          :page-size="list._limit"
          @current-change="currentChange"
        />
      </el-row>

      <!-- 弹窗 -->
      <el-dialog
        :title="categories.id ? '编辑' : '新增'"
        :visible.sync="dialogVisible"
        width="60%"
        @close="closeFn"
      >
        <el-form
          ref="form"
          label-width="80px"
          :model="categories"
          :rules="rules"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="categories.title" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="categories.desc" type="textarea" />
          </el-form-item>
          <el-form-item label="封面">
            <Categories ref="Acategories">
              <img
                v-if="categories.id"
                :src="categories.image"
                alt=""
                style="width: 200px; height: 200px"
              >
            </Categories>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="confirmFn">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 获取分类列表 编辑分类 新建分类 获取分类数量 删除分类
import {
  getCategories,
  compileCategories,
  addCategories,
  categoriesCount,
  delCategories
} from '@/api/categories'
// 上传照片组件
import Categories from './components/Categories.vue'
export default {
  components: { Categories },
  data() {
    return {
      list: {
        _limit: 3, // 获取的最大条数
        _start: 0, // 开始获取的位置
        title_contains: '' // 模糊搜索 title
      },
      categoriesLength: 0, // 分类列表的总数量
      search: '', // 搜索框
      categoriesList: [], // 分类列表
      categories: {
        title: '',
        desc: '',
        image: ''
      }, // 回显
      dialogVisible: false, // 弹窗初始值
      dialog: false, // 弹窗初始值
      rules: {
        title: [
          {
            required: true,
            message: '不能空',
            trigger: 'blur'
          }
        ],
        desc: [
          {
            required: true,
            message: '不能空',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  created() {
    this.getCategoriesS()
  },

  methods: {
    // 搜索框
    async changeFn() {
      // 获取分类数量
      this.categoriesLength = await categoriesCount(this.search)
      // 搜索的内容
      this.list.title_contains = this.search
      // 刷新页面
      this.getCategoriesS()
    },

    // 删除分类
    delFn(id) {
      this.$confirm('此操作将永久删除是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 删除接口
          await delCategories(id)
          // 刷新页面
          this.getCategoriesS()

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 弹窗确定按钮
    async confirmFn() {
      if (this.categories.id) {
        // console.log(this.$refs.Acategories.fileList[0].url, 181)
        // 图片上传后的地址
        this.categories.image = this.$refs.Acategories.fileList[0].url
        // 清空图片
        this.$refs.Acategories.onRemove()

        // 编辑请求
        await compileCategories(this.categories)

        // 关闭弹窗
        this.closeFn()
      } else {
        // 表单核验
        this.$refs.form.validate()
        // 图片上传后的地址
        if (this.$refs.Acategories.fileList[0]) {
          // 上传照片返回的url
          this.categories.image = this.$refs.Acategories.fileList[0].url

          // 新增
          await addCategories(this.categories)
          // 刷新页面
          this.getCategoriesS()
          // 关闭
          this.closeFn()
        } else {
          // 如果没有上传照片,提示用户一下
          this.$message.error('您还没上传照片哦')
        }
      }
    },

    // 关闭弹窗
    closeFn() {
      this.dialogVisible = false
      this.categories = {
        title: '',
        desc: '',
        image: ''
      }
      // 清空图片
      this.$refs.Acategories.onRemove()
    },

    // 新增弹窗
    addCompileFn() {
      this.dialogVisible = true
    },

    // 编辑按钮、
    compileFn(data) {
      this.dialogVisible = true

      this.categories.title = data.title
      this.categories.desc = data.desc

      this.$nextTick(() => {
        this.$refs.Acategories.fileList.push({
          url: data.image
        })
      })
    },

    // 获取分类列表
    async getCategoriesS() {
      // // 获取分类列表
      const res = await getCategories(this.list)
      // console.log(res, 220)
      this.categoriesList = res

      // 获取分类数量
      // 判断是否是搜索，是就不要获取了
      if (!this.list.title_contains) {
        this.categoriesLength = await categoriesCount()
      }
      // console.log(res.length)
    },

    // 页码发生改变时
    currentChange(data) {
      // console.log(data)
      this.list._start = (data - 1) * this.list._limit
      // 重新调用获取数据
      this.getCategoriesS()
    }
  }
}
//
</script>

<style scoped>
.el-table {
  margin-top: 30px;
}
</style>
